<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>-用户欢迎</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <style type="text/css">
        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>
<body>
<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <div>

            <h1 class="logo-name"></h1>
            <img class="logo-name" src="img/用户头像.png" height="180px" width="180px"/>
        </div>
        <br/>
        <h3>修改信息</h3>
        <p>修改信息</p>
        <form class="m-t" role="form" action="login.html" style="text-align: left;">
            <div class="form-group">
                <a style="font-size: 15px; color: black;">姓名</a><a style="color: red;"></a>
                <input disabled="disabled" type="text" id="name" class="form-control" placeholder="请输入姓名" required="">
            </div>
            <div class="form-group">
                <a style="font-size: 15px; color: black;">身份证号</a><a style="color: red;"></a>
                <input disabled="disabled" type="text" id="card" class="form-control" placeholder="请输入身份证号" required="">
            </div>
            <div class="form-group">
                <a style="font-size: 15px; color: black;">手机号</a><a style="color: red;">*</a>
                <input type="text" id="phone" class="form-control" placeholder="请输入手机号" required="">
            </div>
            <div class="form-group">
                <a style="font-size: 15px; color: black;">年龄</a><a style="color: red;">*</a>
                <input type="number" id="age" class="form-control" placeholder="请输入年龄" required="">
            </div>
            <div class="form-group">
                <a style="font-size: 15px; color: black;">性别</a><a style="color: red;">*</a>
                <div class="form-group">
                    <select class="form-control" id="sex">
                        <option>请选择性别</option>
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <a style="font-size: 15px; color: black;">家庭住址</a><a style="color: red;"></a>
                <input type="text" id="address" class="form-control" placeholder="精确到区/村/小区" required="">
            </div>

            <br>
            <button type="button" id="submit" onclick="register()" class="btn btn-primary block full-width m-b">确认修改
            </button>

        </form>
    </div>
</div>

</body>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/index.js"></script>


<script type="application/javascript">

</script>


<script>
    // $(document).ready(function () {
    //     $('.i-checks').iCheck({
    //         checkboxClass: 'icheckbox_square-green',
    //         radioClass: 'iradio_square-green',
    //     });
    // });
    var userInfo = null;

    $(document).ready(function () {
        getLogin();
    });

    function getLogin() {
        $.ajax({
            async: true,
            type: "post",
            url: "/ifLogin",
            contentType: 'application/json',
            dataType: "text",
            success: function (data) {
                var result = JSON.parse(data);
                console.log("resultResult" + result.RESULT);
                userInfo = result.RESULT;
                if (result.SUCCESS) {
                    console.log("用户已登录！");
                    console.log("userinfo" + userInfo);
                    addInfo();
                } else {
                    console.log(result);
                    console.log(result.RESULT);
                }
            },
            error: function (data) {
                alert("请求失败");
            }
        });
    }


    function register() {
        var name = $("#name").val().trim();
        var card = $("#card").val().trim();
        var sex = $("#sex").val().trim();
        var age = $("#age").val().trim();
        var numAge = parseInt(age);
        var phone = $("#phone").val().trim();
        var age = $("#address").val().trim();
        if (name == null) {
            alert("请输入名字！");
            return false;
        }
        if (phone == null || phone.length != 11) {
            alert("手机号不符合规范！");
            return false;
        }
        if (card == null || card.length != 18) {
            alert("身份证不符合规范！");
            return false;
        }
        if (sex == null || (sex != 0 && sex != 1)) {
            alert("请输入性别！");
            return false;
        }
        if (age != null) {
            if (numAge < 0 && numAge >= 150) {
                alert("请输入正确年龄！");
                return false;
            }
        } else {
            alert("请输入年龄！");
            return false;
        }
        $.ajax({
            async: true,
            type: "post",
            url: "/modifyUserInfo",
            data: JSON.stringify(getQueryData()),
            contentType: 'application/json',
            dataType: "text",
            success: function (data) {
                var result = JSON.parse(data);
                console.log(result);
                userInfo = result.RESULT;
                if (result.SUCCESS) {
                    alert(result.RESULT);
                } else {
                    alert(result.RESULT);
                }
            },
            error: function (data) {
                alert("请求失败");
            }
        });

    }


    function addInfo() {
        var name = $("#name");
        var card = $("#card");
        var sex = $("#sex");
        var age = $("#age");
        var phone = $("#phone");
        var address = $("#address");
        name.val(userInfo.name);
        card.val(userInfo.card);
        $("#sex").find("option[value='" + userInfo.sex + "']").attr("selected", true);
        phone.val(userInfo.phone);
        address.val(userInfo.address);
        age.val(userInfo.age);

    }


    function getQueryData() {
        var dto = {};
        if (!ifEmpty($("#name").val())) {
            dto["name"] = $("#name").val().trim();
        }
        if (!ifEmpty($("#card").val())) {
            dto["card"] = $("#card").val().trim();
        }
        if (!ifEmpty($("#phone").val())) {
            dto["phone"] = $("#phone").val().trim();
        }
        if (!ifEmpty($("#age").val())) {
            dto["age"] = $("#age").val().trim();
        }
        if (!ifEmpty($("#address").val())) {
            dto["address"] = $("#address").val().trim();
        }
        if (!ifEmpty($("#sex").val())) {
            dto["sex"] = $("#sex").val().trim();
        }
        return dto;
    }


</script>


</html>
